<template>
    <table class="table border" v-loading="loading">
        <tr>
            <th colspan="2">用户信息</th>
        </tr>
        <tr>
            <td>昵称：{{pdata.nick_name}}</td>
            <td>手机号码：{{pdata.mobile}}</td>
        </tr>
        <tr>
            <th colspan="2">反馈时间</th>
        </tr>
        <tr>
            <td colspan="2">单号：{{pdata.create_time}}</td>
        </tr>
        <template v-if="pdata.images.length > 0">
            <tr>
                <th colspan="2">附图</th>
            </tr>
            <tr>
                <td colspan="2">
                    <template v-for="item in pdata.images">
                        <img v-preview class="img-preview" :src="item" alt="">
                    </template>
                </td>
            </tr>
        </template>
        <tr>
            <th colspan="2">反馈内容</th>
        </tr>
        <tr>
            <td colspan="2">{{pdata.content}}</td>
        </tr>
        <template v-if="!isEdit">
            <tr>
                <th colspan="2">
                    <span class="r5">回复内容</span>
                    <el-button size="mini" type="success" @click="edit(true)">修改</el-button>
                </th>
            </tr>
            <tr>
                <td>管理员：{{detail.admin_name}}</td>
                <td>时间：{{detail.reply_time}}</td>
            </tr>
            <tr>
                <td colspan="2">{{detail.reply_content}}</td>
            </tr>
        </template>
        <template v-if="isEdit">
            <tr>
                <th colspan="2">
                    <span class="r5">操作</span>
                    <el-button size="mini" type="danger" @click="del()">删除</el-button>
                </th>
            </tr>
            <tr>
                <td colspan="2">
                    <el-input type="textarea" v-model="content" :rows="6" :maxlength="500"/>
                    <el-button size="mini" class="r5" type="primary" @click="reply()">回复</el-button>
                    <el-button size="mini" v-if="detail.is_reply == 1" type="warning" @click="edit(false)">取消</el-button>
                </td>
            </tr>
        </template>
    </table>
</template>

<script>
    import {feedbackInfo} from "@/api";

    export default {
        data() {
            return {
                detail: {},
                loading: false,
                content: '',
                isEdit: false
            }
        },
        props: ['pdata'],
        created() {
            this.getReply();
        },
        methods: {
            getReply() {
                this.loading = true;
                feedbackInfo('get', {id: this.pdata.id}, (res) => {
                    this.detail = res;
                    if (this.detail.is_reply == 0) {
                        this.isEdit = true;
                    }
                    this.loading = false;
                });
            },
            del() {
                this.$confirm("确定删除该反馈信息？", () => {
                    this.loading = true;
                    feedbackInfo('delete', {id: this.pdata.id}, () => {
                        this.loading = false;
                        this.$emit('close', true);
                    }, () => {
                        this.loading = false;
                    })
                })
            },
            reply() {
                if (this.content.length < 1) {
                    this.$Message.error('回复内容不能为空');
                    return false;
                }
                this.loading = true;
                feedbackInfo('post', {id: this.pdata.id, content: this.content}, () => {
                    this.loading = false;
                    this.$emit('close', true);
                }, () => {
                    this.loading = false;
                })
            },
            edit(bool) {
                this.content = this.detail.reply_content;
                this.isEdit = bool;
            }
        }
    }
</script>
